<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Login</title>

        <link rel="stylesheet" type="text/css" href="css/style_1.css">
        <link rel="stylesheet" type="text/css" href="css/devices.css">
        <script src="css/jquery.min.js" type="text/javascript"></script>        
        <script type="text/javascript" src="js/jq.placeholder.js"></script>
        <script type="text/javascript" src="js/jq.countdown.js"></script>
        <script type="text/javascript" src="js/custom.js"></script>
    </head>
    <body>
        <!-- BEGIN HEADER -->
        <header>
            <h1>Supportive Learning</h1>
            <h3>We'll be back soon!</h3>
        </header>
        <!-- // END HEADER -->
        <!-- BEGIN BODY -->
        <section id="bottom">

            <!-- BEGIN SOCIAL -->
            <div id="social"> 
                <div>
                    <span>Follow us</span>
                    <ul>
                        <li class="twitter"><a href="#" target="_blank"></a></li>
                        <li class="facebook"><a href="#" target="_blank"></a></li>
                        <li class="tumblr"><a href="#" target="_blank"></a></li>
                        <li class="vimeo"><a href="#" target="_blank"></a></li>
                        <li class="flickr"><a href="#" target="_blank"></a></li>
                    </ul>
                    <span><a href="#" id="open-feedback"> Show error login</a></span>
                     <span><a href="register.jsp"> Registration</a></span>
                </div>
            </div>
            <!-- // END SOCIAL -->

            <!-- BEGIN TIMER -->
            <div id="countdown">              
                <form action="Login" method="post">                  
                    <input type="text" name="username" placeholder="Enter Username"/>
                    <input type="password" name="password" placeholder="Enter Password"/>                   
                    <button> Login</button>
                </form>
            </div>           

            <!-- // END TIMER -->
        </section>        
        <!-- // END BODY -->

        <!-- BEGIN PROGRESS BAR -->        
        <section id="progress-bar">
            <div class="ind">
                <span>75%</span>
            </div>

            <div class="bar"></div>
        </section>
        <!-- // END PROGRESS BAR -->
        <!-- BEGIN SUBSCRIBE FORM -->

        <section id="feedback">
            <div class="close"></div>
            <div class="descr">
                Error
            </div>
            <div class="body">
                <form id="feedback-form" action="">
                    <% if (request.getAttribute("msg") != null) {
                    %>
                    <center><font size="4" face="verdana" color="red"> <%= request.getAttribute("msg")%> </font></center>
                        <%
                            }
                        %>
                </form>

                <div id="thanks">Enter username and password</div>
            </div>

            <div class="feedback-arr arrow-down"></div>
        </section>
        <!-- // BEGIN SUBSCRIBE FORM -->
        <div id="pattern">
        </div>
        <div id="ct" style="display: none">
        </div>
    </body>
</html>
